<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item[format.value])"
        ><span
          v-if="
            isDrop
              ? item.elTagType !== 'default' && item.elTagType !== ''
              : isDrop
          "
          :key="item[format.value]"
          :class="['tag-' + item.elTagType, item.elTagClass, 'pl-2']"
          >●</span
        >
        <span
          :key="item[format.value]"
          :index="index"
          :class="isTextClass ? item.elTagClass : ''"
        >
          {{ item[format.label] }}</span
        >
        <slot></slot>
      </template>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null
  },
  // 当前的值
  value: [Number, String, Array, Function],
  // 是否显示圆点
  isDrop: {
    type: Boolean,
    default: true
  },
  // 文本是否应用样式
  isTextClass: {
    type: Boolean,
    default: false
  },
  format: {
    type: Object,
    default: () => {
      return {
        label: 'label',
        value: 'value'
      }
    }
  }
})

const values = computed(() => {
  if (
    props.value !== null &&
    typeof props.value !== 'undefined' &&
    typeof props.value !== 'function'
  ) {
    return Array.isArray(props.value) ? props.value : [String(props.value)]
  } else if (typeof props.value == 'function') {
    let val = props.value()
    return val
  } else {
    return []
  }
})
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.tag-primary {
  color: #409eff;
}
.tag-success {
  color: #67c23a;
}
.tag-info {
  color: #909399;
}
.tag-warning {
  color: #e6a23c;
}
.tag-danger {
  color: #f56c6c;
}
</style>
